<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			margin-left: 400px;
/*			position: relative;*/
/*			left: 200px;*/
/*			top: 200px;*/
/*			left: ;*/
/*			right: ;*/
/*			top: ;*/
/*			bottom: ;*/
/*			相对定位  相对定位不脱标  参考自身进行移动 移动后 原本所占的空间不变   盒子走了位置还在*/

			position: absolute;
			left: 0;
			top: 0;
/*			绝对定位  绝对定位脱标  绝对定位参考有定位的父级 如果没有就会一直向上寻找如果没有,最后就是参考body*/
		}
		.two{
			width: 300px;
			height: 300px;
			background-color: blue;
			position: relative;
/*			相对定位对父级影响最小*/
		}
/*		子绝父相*/
		.child{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 0;
/*			左边 距离(有定位父级)body 0 px*/
		}
		.thrre{
			width: 100px;
			height: 100px;
			background-color: aqua;
			position: fixed;
/*			固定定位  会脱标  参考点  浏览器首屏*/
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two">
		<div class="child"></div>
	</div>


	<div class="three">
		1111
	</div>

</body>
</html>